import React, { useEffect, useState } from "react";
import { Image, NavBar, Space } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import "./CommunityReplyDetails.less";
import { replyDetails, replyRead } from "../../service";
import { getCurrentUserInfo } from "@/utils/authority";


const CommunityReplyDetails: React.FC<any> = () => {
	const navigate = useNavigate();
	const location = useLocation();
	const userId = getCurrentUserInfo()?.data?.id;
	const itemData = location?.state;
	const [detailsData, setDetailsData] = useState<any>({});

	const getDetailsData = async () => {
		const params = {
			userId,
			replyId: itemData.id,
		};
		try {
			const { data } = await replyDetails(params);
			setDetailsData(data || {});
		} catch { }
	};
	const dataRead = async () => {
		const params = {
			replyId: itemData.id,
		};
		try {
			await replyRead(params);
		} catch { }
	};
	useEffect(() => {
		getDetailsData();
		dataRead();
	}, []);

	return (
		<div className="ReplyDetails-contarnier">
			<div className="header">
				<div>
					<NavBar onBack={() => navigate(-1)}>
						<div className="commontitle">回复详情</div>
					</NavBar>
				</div>
			</div>
			<div className="ReplyDetails-card">
				<div className="ReplyDetails-box">
					<div className="ReplyDetails-box-card">
						<div className="ReplyDetails-box-card-title ">{detailsData?.title}</div>
						<div className="ReplyDetails-box-card-type">
							<span>{detailsData?.type}</span>
						</div>
						<div className="ReplyDetails-box-card-time">
							{/* <div>{detailsData?.adress}</div> */}
							<div>{detailsData?.initiationTime}</div>
						</div>
						<div className="ysl">已回复</div>
					</div>
				</div>
				<div className="ReplyDetails-description">
					<div className="ReplyDetails-description-title">描述</div>
					<div className="ReplyDetails-description-box">
						<p>{detailsData?.replyContent}</p>
						<div className="ReplyDetails-description-box-img">
							<Space wrap>
								{(Array.isArray(detailsData?.img?.split(',')) ? detailsData?.img?.split(',') : [detailsData?.img] ?? []).map((item) => (
									<Image
										src={item}
										width={64}
										height={64}
										fit='cover'
										style={{ borderRadius: 4 }}
									/>
								))}
							</Space>

						</div>
					</div>
				</div>
				<div className="ReplyDetails-description">
					<div className="ReplyDetails-description-title">回复结果</div>
					<div className="ReplyDetails-description-box">
						<div>{detailsData?.deptName}</div>
						<div className="ReplyDetails-description-box-time">
							<div>网格员：{detailsData?.realName}</div>
							<div>{detailsData?.replyTime}</div>
						</div>
						<p>{detailsData?.replyNeirong}</p>
					</div>
				</div>
			</div>
		</div>
	);
};

export default CommunityReplyDetails;
